<template>
	<view>
    <view class="header">
			<view class="header-left">
				<view class="nickname">Hey,{{shopData.name}}</view>
				<view class="sentence">欢迎回来,祝您工作顺利</view>
      </view>
		</view>

    <view class="middle">
			<view class="group3">
			  <text class="word4">{{balance}}</text>
			  <text class="txt2">次</text>
			</view>
			<text class="txt3">套餐剩余次数</text>
		</view>
		<view class="static">
			<image mode="aspectFill" src="https://source.qingyunclouds.com/indexBg.png"></image>
		</view>
    <view>
      <u-tabs-swiper ref="uTabs" bar-width="200" bar-height="3" name="cate_name" active-color="#2E3C4D" inactive-color="#7A8899" :list="list" :is-scroll="false" @change="tabClick" :current="current"></u-tabs-swiper>
    </view>
<!--    <u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>-->

    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" >
      <!-- 发送数据 -->
      <swiper-item class="swiper-item">
        <view class="little-title">发送数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/3.png"></image>
          <view class="detail-content">
            <view class="content-top">累计发送</view>
            <view class="content-bottom">Cumulative&nbsp;quantity</view>
          </view>
          <view class="detail-data-total">
            {{sendData.total}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/2.png"></image>
          <view class="detail-content">
            <view class="content-top">今日发送</view>
            <view class="content-bottom">Quantity sent today</view>
          </view>
          <view class="detail-data-today">
            +{{sendData.today}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/1.png"></image>
          <view class="detail-content">
            <view class="content-top">昨日发送</view>
            <view class="content-bottom">Quantity sent yesterday</view>
          </view>
          <view class="detail-data-yesterday">
            {{sendData.yesterday}}
          </view>
        </view>
      </swiper-item>
      <!-- 抖音数据 -->
      <swiper-item class="swiper-item">
        <view class="little-title">抖音数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/heart.png"></image>
          <view class="detail-content">
            <view class="content-top">累计点赞</view>
            <view class="content-bottom">Cumulative download</view>
          </view>
          <view class="detail-data" style="color:rgb(240, 89, 78)">
            {{TikTokData.diggCounts}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/right.png"></image>
          <view class="detail-content">
            <view class="content-top">累计转发</view>
            <view class="content-bottom">Cumulative forwarding</view>
          </view>
          <view class="detail-data">
            {{TikTokData.forwardCounts}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/stop.png"></image>
          <view class="detail-content">
            <view class="content-top">累计播放量</view>
            <view class="content-bottom">Cumulative play volume</view>
          </view>
          <view class="detail-data">
            {{TikTokData.playCounts}}
          </view>
        </view>
      </swiper-item>
      <!-- 核销数据 -->
      <swiper-item class="swiper-item">
        <view class="little-title">核销数据</view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/3.png"></image>
          <view class="detail-content">
            <view class="content-top">累计核销</view>
            <view class="content-bottom">Cumulative Write off</view>
          </view>
          <view class="detail-data-total">
            {{couponData.total}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/edit.png"></image>
          <view class="detail-content">
            <view class="content-top">今日核销</view>
            <view class="content-bottom">Write off today</view>
          </view>
          <view class="detail-data-today">
            +{{couponData.today}}
          </view>
        </view>
        <view class="item-detail">
          <image class="detail-img" src="http://source.qingyunclouds.com/edit_g.png"></image>
          <view class="detail-content">
            <view class="content-top">昨日核销</view>
            <view class="content-bottom">Write off yesterday</view>
          </view>
          <view class="detail-data-yesterday">
            {{couponData.yesterday}}
          </view>
        </view>
      </swiper-item>
    </swiper>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>

  </view>
</template>

<script>
import tabs from './components/tabs.vue';
import { sendCount,videoCount} from "../../api/shop";

export default{
	components:{
		tabs
	},
  data(){
	  return {
      balance:"",
      swiperCurrent: 0,
      current: 0,
      list: [{
        cate_name: '发送数据'
      }, {
        cate_name: '抖音数据'
      }, {
        cate_name: '核销数据'
      }],
      tabs:[
        1,2,3
      ],
      //发送数据
      sendData:{},
      //抖音数据
      TikTokData:{},
      //核销数据
      couponData:{},
      noticeList:[
        '寒雨连江夜入吴',
        '平明送客楚山孤',
        '洛阳亲友如相问',
        '一片冰心在玉壶'
      ],
      shopData:{}
    }
  },
  onLoad(){
    this.shopData = uni.getStorageSync('userInfo');

  },
  onShow(){
    this.getSendData();
    this.getVideoData();
    this.getCouponData();
    this.getBalance();

  },
  methods:{
	  //获取余额
    getBalance(){

      this.$refs.loading.open()

      videoCount().then(res =>{
        this.balance = res.data;
        this.$refs.loading.close()

      }).catch(err =>{
        this.$refs.loading.close()

      })
    },
    //获取发送数据
    getSendData(){
      sendCount({
        type:0
      }).then(res =>{
        this.sendData = res.data
      })
    },
    //抖音数据
    getVideoData(){
      sendCount({
        type:1
      }).then(res =>{
        this.TikTokData = res.data
      })
    },
    //核销数据
    getCouponData(){
      sendCount({
        type:2
      }).then(res =>{
        this.couponData = res.data
      })
    },
    // 点击标签栏change事件
    tabClick(e){
      this.swiperCurrent = e;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      if (current == 0){
        this.getSendData();
      }
      if (current == 1){
        this.getVideoData();
      }
      if (current == 2){
        this.getCouponData();
      }
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    }
  }
}
</script>

<style lang="scss">
	.header{
		display: flex;
		width: 90%;
		margin: 20rpx auto 0;

		justify-content: space-between;
		.header-left {
		  z-index: auto;
		  width: 160rpx;
		  height: 130rpx;
		  margin-top: 4rpx;
		}

		.nickname {
		  z-index: 32;
		  width: 120rpx;
		  display: block;
		  overflow-wrap: break-word;
		  color: rgba(31, 63, 102, 1);
		  font-size: 58rpx;
		  white-space: nowrap;
		  line-height: 82rpx;
		  text-align: center;
		  align-self: flex-start;
		  font-weight: 600;
		}
		.sentence {
		  z-index: 31;
		  width: 158rpx;
		  display: block;
		  overflow-wrap: break-word;
		  color: rgba(31, 63, 102, 1);
		  font-size: 24rpx;
		  white-space: nowrap;
		  line-height: 44rpx;
		  text-align: center;
		  align-self: flex-end;
		  margin-top: 4rpx;
		  font-weight: 400;
		  letter-spacing: 3px;
		}
	}
	.middle{
		display: flex;
		justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: 50rpx 0 ;
	  .group3 {
      display: flex;
      z-index: auto;
      width: 272rpx;
      height: 134rpx;
	  }
		.word4 {
		  // z-index: 7;
		  width: 232rpx;
		  height: 134rpx;
		  display: block;
		  overflow-wrap: break-word;
		  color: rgba(31, 63, 102, 1);
		  font-size: 96rpx;
		  white-space: nowrap;
		  line-height: 134rpx;
		  text-align: center;
		  font-weight: 550;
		}

		.txt2 {
		  width: 28rpx;
		  height: 40rpx;
		  color: rgba(31, 63, 102, 1);
		  font-size: 28rpx;
		  white-space: nowrap;
		  line-height: 40rpx;
		  text-align: center;
		  align-self: flex-end;
		  margin-bottom: 30rpx;
		  margin-left: 12rpx;
		}

		.txt3 {
		  z-index: 8;
		  width: 168rpx;
		  display: block;
		  overflow-wrap: break-word;
		  color: rgba(31, 63, 102, 1);
		  font-size: 28rpx;
		  white-space: nowrap;
		  line-height: 40rpx;
		  text-align: center;
		  align-self: center;
		  font-weight: 600;
		  letter-spacing: 2rpx;
		}
	}
	.static{
		width: 100%;
		background: #FFFFFF;
		image{
			width: 100%;
			height: 154rpx;
		}
	}
  uni-swiper{
    height: 100%
  }
  swiper{
    height: 550rpx;
  }
  .swiper-item{
    // display: block;
    // position: relative;
    height: 500rpx;
    .little-title{
      // position: absolute;
      width: 104rpx;
      height: 36rpx;
      margin-left: 50rpx;
      margin-top: 34rpx;
      font-size: 26rpx;
      color: #7A8899;
      font-weight: 600;
    }
  }

  .item-detail{
    margin: 30rpx auto 30rpx;
    width: 90%;
    display: flex;
    justify-content: space-between;
    .detail-img{
      width: 120rpx;
      height: 120rpx;
    }
    .detail-content{
      margin: 15rpx 20rpx 0 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      .content-top{
        // z-index: 74;
        // width: 406rpx;
        height: 44rpx;
        display: block;
        overflow-wrap: break-word;
        color: #242B33;
        font-size: 32rpx;
        white-space: nowrap;
        line-height: 44rpx;
        text-align: left;
        font-weight: 600;
        letter-spacing: 3rpx;
      }
      .content-bottom{
        z-index: 73;
        display: block;
        overflow-wrap: break-word;
        color: rgba(138, 145, 153, 1);
        font-size: 28rpx;
        white-space: nowrap;
        line-height: 38rpx;
        text-align: left;
        margin-top: 4rpx;
      }
    }
    .detail-data{
      z-index: 71;
      width: 90rpx;
      display: block;
      overflow-wrap: break-word;
      color: #8F9FB3;
      font-size: 32rpx;
      white-space: nowrap;
      line-height: 44rpx;
      // text-align: right;
      margin: 20rpx 0 0 50rpx;
      font-weight: 600;
    }
    .detail-data-total{
      z-index: 71;
      width: 90rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(40, 131, 242, 1);
      font-size: 32rpx;
      white-space: nowrap;
      line-height: 44rpx;
      text-align: right;
      margin: 30rpx 0 0 50rpx;
      font-weight: 600;
    }
    .detail-data-today{
      z-index: 71;
      width: 90rpx;
      display: block;
      overflow-wrap: break-word;
      color: #008C41;
      font-size: 32rpx;
      white-space: nowrap;
      line-height: 44rpx;
      text-align: right;
      margin: 30rpx 0 0 50rpx;
      font-weight: 600;
    }
    .detail-data-yesterday{
      z-index: 71;
      width: 90rpx;
      display: block;
      overflow-wrap: break-word;
      color: #8F9FB3;
      font-size: 32rpx;
      white-space: nowrap;
      line-height: 44rpx;
      text-align: right;
      margin: 30rpx 0 0 50rpx;
      font-weight:550;
    }

  }

</style>
